import React, { useEffect, useState } from 'react';
import {getProList} from '../../api/pro'
import { Button, Table } from 'antd';

// 文件导出用的
import ExportJsonExcel from 'js-export-excel'

const Index = () => {

  const [proList,setProList] = useState()

  useEffect(()=>{
    getProList().then(res => {
      // console.log(res);
      setProList(res.data)
    })
  }, [])
  const columns = [
    {
      title: '序号',
      render(t,r,i){
        return <span>{i + 1}</span>
      }
    }, {
      title: '商品名称',
      dataIndex: 'proname'
    }
  ]

  return (
    <div>
      <h3>文件导出</h3>
      <Button onClick={()=>{
        const options = {
          fileName: 'proList', // 保存文件的名字
          datas: [
            {
              sheetData: proList, // 要导出的源数据
              sheetName: "你笑起来真好看", // 表名称
              // 需要导出数据的字段
              sheetFilter: ["brand", "category", 'desc' ,'proname', 'originprice', 'img1'],
              // 对应字段的表头名称
              sheetHeader: ["品牌", "分类", '描述', '商品名称', '价格', '图片'],
              // 设置单元格宽度
              columnWidths: [],
            }
          ]
        }

        // 根据配置的 options 创建 Excel
        var toExcel = new ExportJsonExcel(options); //new
        // 将创建的 Excel 导出
        toExcel.saveExcel(); //保存

      }}>导出</Button>
      <Table dataSource={proList} rowKey='proname' pagination={{pageSize: 8}} columns={columns} />
    </div>
  );
};

export default Index;
